import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon,Picker } from 'weaver-mobile';
import { _, DetailUtil } from '../../util/pcPublic';
import { getLabel } from '../../util/common';

@inject('wfGlobalStore','wfLayoutStore')
@withRouter
@observer
export default class DPaging extends React.Component {
    render() {
        const { symbol,wfGlobalStore,wfLayoutStore } = this.props;
        const { workflowid } = wfGlobalStore.commonParam;
        const { detailMap } = wfLayoutStore;
        const detailObj = detailMap.get(symbol);
        const groupid = detailObj.attr.groupid - 1;
        const { pagingInfo,rowInfoArr } = detailObj;
        const total = rowInfoArr.length;
        let { enabled,current,pagesize } = pagingInfo;
        if(!enabled)
            return null;
        const pagesizeArr = [10, 20, 30, 50, 100, 150, 200];
        const options = [];
        pagesizeArr.map(size =>{
            options.push({value:size, label:`${size}条/页`});
        });
        const totalPage = Math.ceil(total/pagesize);
        if(totalPage === 0)
            current = 0;
        const firstBtn = current > 1;
        const preBtn = current > 1;
        const nextBtn = current < totalPage;
        const lastBtn = current < totalPage;

        return (
            <div className="wf-detail-paging">
                <div className="wf-detail-pagesize">
                    <Picker 
                        data={options} 
                        cols={1} 
                        onChange={data =>{
                            const params = { workflowid, groupid, pagesize:data[0]};
                            detailObj.changePageSize(params);
                            DetailUtil.controlDetailPosition(groupid);
                        }}
                        value={[pagesize]}
                    >
                        <div className="wf-detail-pagesize-switch">{`${pagesize}${getLabel(386261,"条/页")}`}</div>
                    </Picker>
                </div>
                <div className="wf-detail-pageinfo">
                    {`${current}/${totalPage}`}
                </div>
                <div className="wf-detail-switch-btn">
                    <Icon type="home-page-1" onClick={()=>{
                        firstBtn && this.doSwitchPage(1);
                    }} />
                </div>
                <div className="wf-detail-switch-btn">
                    <Icon type="arrow-left" onClick={()=>{
                        preBtn && this.doSwitchPage(current-1);
                    }} />
                </div>
                <div className="wf-detail-switch-btn">
                    <Icon type="arrow-right" onClick={()=>{
                        nextBtn && this.doSwitchPage(current+1);
                    }} />
                </div>
                <div className="wf-detail-switch-btn">
                    <Icon type="tail-page" onClick={()=>{
                        lastBtn && this.doSwitchPage(totalPage);
                    }} />
                </div>
            </div>
        )
    }
    doSwitchPage(current){
        const { symbol,wfLayoutStore } = this.props;
        const { detailMap } = wfLayoutStore;
        const detailObj = detailMap.get(symbol);
        const groupid = detailObj.attr.groupid - 1;
        detailObj.controlPagingInfo({current});
        DetailUtil.controlDetailPosition(groupid);
        window.WfForm.triggerAction(window.WfForm.ACTION_SWITCHDETAILPAGING, [groupid], 200);
    }
}